<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1.前端为什么需要打包 -->
  1.体积更小（Tree-Shaking，压缩，合并），加载更快
  2.编译高级语言或语法（TS，ES6+，，模块化，scss）
  3.兼容性和错误检查（Polyfill，postcss，eslint）

  4.统一高效的开发环境
  5.统一的构建流程和产出标准
  6.继承公司构建规范（提测，上线等）

  <!-- 2.module chunk bundle的区别 -->
  module- 各个源码文件，webpack中一切皆模块
  chunk- 多模块合并成的，如entry import() splitChunk
  bundle- 最终的输出文件

  <!-- 3.loader和plugin的区别 -->
  loader模块转换器，如less -> css
  plugin扩展插件，如HtmlWebpackPlugin

  <!-- 4.常见的loader和plugin有哪些 -->
  loader: style-loader css-loader less-loader 
          babel-loader json5-loader yaml-loader 
          toml-loader xml-loader csv-loader
  plugin: HtmlWebpackPlugin MiniCssExtractPlugin

  <!-- 5.babel和webpack的区别 -->
  babel - JS新语法编译工具，不关心模块化
  webpack - 打包r构建工具，是多个loader plugin的集合

  <!-- 6.如何产出一个lib -->
  参考webpack.dll.js

  <!-- 7.babel-polyfill和babel-runtime的区别 -->
  babel-polyfill会污染全局
  babel-runtime不会污染全局
  产出第三方lib要用babel-runtime

  <!-- 8.webpack如何实现懒加载 -->
  import()
  结合Vue React异步组件
  结合Vue-router React-router异步加载路由

  <!-- 9.为何Proxy不能被Polyfill -->
  如class可以用function模拟
  如Promise可以用callback来模拟
  但Proxy的功能用Object.definePropety无法模拟

  <!-- 10.webpack优化构建速度（用于生产环境） -->
  1.优化babel-loader 
  2.IgnorePlugin
  3.noParse 
  4.happyPack
  5.ParallelUglifyPlugin
  
  <!-- 10.webpack优化构建速度（不能用于生产环境 -->
  自动刷新
  热更新
  DllPlugin

  <!-- 11.webpack优化产出代码 -->
  1.小图片base64编码
  2.bundle加hash
  3.懒加载
  4.提取公共代码
  5.使用CDN加速
  6.IgnorePlugin 
  7.使用production
  8.Scope Hosting

</body>
</html>